import React, { useEffect, useState, useCallback, useMemo } from 'react';
import { Button, Typography, Image, Space, Tag, Rate, Card, Alert } from 'antd';
import { ArrowLeftOutlined, ShoppingCartOutlined, ShoppingOutlined, StarFilled, WarningOutlined } from '@ant-design/icons';
import { useParams, useNavigate } from 'react-router-dom'; 
import './index.scss';

const { Title, Text, Paragraph } = Typography;


const BookDetail = () => {
  const { id } = useParams(); 
  const navigate = useNavigate(); 

  const [book, setBook] = useState()

  const goBack = useCallback(() => {
    navigate(-1); 
  }, [navigate]);

  useEffect(()=>{
    const result = sessionStorage.getItem("BOOK")
    if (result) {
      setBook(JSON.parse(result)) 
    }

  }, [])

  return (
    <div className="book-detail-page">
      <div className="flex items-center justify-between">
        <h1 className="page-heading">图书详情</h1>
        <Button icon={<ArrowLeftOutlined />} onClick={goBack}>
          返回
        </Button>
      </div>

      {book ? (
        <div className="book-content">
          <div className="book-main">
            <div className="book-cover">
              <Image src={book.coverUrl} alt={book.title} preview={false} />
            </div>
            <div className="book-info">
              <Title level={2} className="book-title">{book.title}</Title>
              <div className="book-meta">
                <div className="meta-item">
                  <Text className="label">作者：</Text>
                  <Text className="value">{book.author}</Text>
                </div>
                <div className="meta-item">
                  <Text className="label">分类：</Text>
                  <Tag className="value category">{book.category}</Tag>
                </div>
                <div className="meta-item">
                  <Text className="label">评分：</Text>
                  <div className="rating">
                    <Rate
                      disabled
                      allowHalf
                      defaultValue={book.rating}
                      character={<StarFilled />}
                      className="stars"
                    />
                    <Text className="rating-value">{book.rating}</Text>
                  </div>
                </div>
                <div className="meta-item">
                  <Text className="label">销量：</Text>
                  <Text className="value">{book.sales}</Text>
                </div>
                <div className="meta-item">
                  <Text className="label">价格：</Text>
                  <Text className="value price">{book.price}</Text>
                </div>
              </div>

              <Space size="middle" className="book-actions">
                <Button type="primary" icon={<ShoppingCartOutlined />}>
                  加入购物车
                </Button>
                <Button type="primary" style={{ backgroundColor: '#52c41a', borderColor: '#52c41a' }} icon={<ShoppingOutlined />}>
                  立即购买
                </Button>
              </Space>
            </div>
          </div>

          <div className="book-description">
            <Title level={3}>图书简介</Title>
            <Paragraph>{book.description || '暂无简介'}</Paragraph>
          </div>
        </div>
      ) : (
        <div className="no-book">
          <WarningOutlined className="no-book-icon" />
          <Paragraph>未找到图书信息</Paragraph>
          <Button type="primary" onClick={goBack}>返回列表</Button>
        </div>
      )}
    </div>
  );
};

export default BookDetail;